<template>
  <div class="min-h-screen bg-gradient-to-b from-blue-50 to-white">
    <main class="max-w-4xl mx-auto px-4 py-8 sm:py-12">
      <!-- 项目标题 -->
      <div class="text-center mb-8">
        <h1 class="text-3xl sm:text-4xl font-bold text-gray-800 mb-4">智能文献检索系统</h1>
        <p class="text-gray-600 text-sm sm:text-base">基于语义理解的智能文献搜索与推荐平台</p>
      </div>

      <!-- 项目介绍 -->
      <div class="bg-white rounded-xl shadow-lg p-6 sm:p-8 mb-8">
        <h2 class="text-xl sm:text-2xl font-bold text-gray-800 mb-4">项目介绍</h2>
        <p class="text-gray-600 mb-4 text-sm sm:text-base leading-relaxed">
          本项目旨在通过语义理解技术，为研究人员提供更智能、更精准的文献检索服务。系统能够理解用户的研究问题和需求，
          通过语义匹配找到最相关的学术文献，提高文献检索的效率和准确性。
        </p>
        <!-- 项目的架构图 -->
        <div class="aspect-w-16 aspect-h-20 mb-10">
          <img src="../assets/书生蒲语流程图.png" alt="项目架构图" class="rounded-lg object-contain w-full h-100 border border-gray-200 cursor-pointer hover:opacity-90 transition-opacity" @click="openImage($event)">
        </div>
        <!-- 项目后续说明 -->
        <p class="text-gray-600 mb-4 text-sm sm:text-base leading-relaxed">
          1. ip 地址说明(项目获取用户ip通过ip-api.com获取,主要用于后续项目限制用户使用次数)
        </p>

      </div>

      <!-- 代码仓库 -->
      <div class="bg-white rounded-xl shadow-lg p-6 sm:p-8 mb-8">
        <h2 class="text-xl sm:text-2xl font-bold text-gray-800 mb-4">代码仓库</h2>
        <div class="space-y-4">
          <a href="https://github.com/" 
             class="flex flex-col sm:flex-row items-start sm:items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
            <div class="flex items-center mb-2 sm:mb-0">
              <img src="https://api.iconify.design/noto:octopus.svg" class="w-6 sm:w-8 h-6 sm:h-8 mr-3" alt="GitHub mascot">
              <i class="fab fa-github text-xl sm:text-2xl mr-3"></i>
            </div>
            <span class="text-gray-700 text-sm sm:text-base">GitHub 暂时未开放</span>
          </a>
          <a href="https://gitee.com/xiong_bio/literature_recommend" 
             class="flex flex-col sm:flex-row items-start sm:items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
            <div class="flex items-center mb-2 sm:mb-0">
              <img src="https://api.iconify.design/noto:fox.svg" class="w-6 sm:w-8 h-6 sm:h-8 mr-3" alt="Gitee mascot">
              <i class="fab fa-git-alt text-xl sm:text-2xl mr-3"></i>
            </div>
            <span class="text-gray-700 text-sm sm:text-base break-all">Gitee https://gitee.com/xiong_bio/literature_recommend</span>
          </a>
        </div>
      </div>

      <!-- 更新日志 -->
      <div class="bg-white rounded-xl shadow-lg p-6 sm:p-8">
        <h2 class="text-xl sm:text-2xl font-bold text-gray-800 mb-4">更新日志</h2>
        <div class="space-y-4">
          <div class="border-l-4 border-blue-500 pl-4">
            <div class="text-sm text-gray-500">2024-12-18</div>
            <div class="font-semibold text-gray-800">v1.0.0 初始版本发布</div>
            <ul class="list-disc list-inside text-gray-600 text-sm mt-2">
              <li>实现基础文献检索功能</li>
              <li>支持语义理解搜索</li>
              <li>响应式界面设计</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 后续计划 -->
      <div class="bg-white rounded-xl shadow-lg p-6 sm:p-8 mt-8">
        <h2 class="text-xl sm:text-2xl font-bold text-gray-800 mb-4">后续计划</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- 智能引用生成器 -->
          <div class="bg-gray-50 rounded-lg p-4">
            <div class="aspect-w-16 aspect-h-9 mb-4">
              <img 
                src="../assets/project1.gif"
                alt="智能引用生成器演示"
                class="rounded-lg object-contain w-full h-48 border border-gray-200 cursor-pointer hover:opacity-90 transition-opacity"
                @click="openImage($event)"
              >
            </div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">智能引用生成器</h3>
            <p class="text-gray-600 text-sm">
              基于GPT模型的智能引用生成工具，可自动识别文献内容，切片，找文献，一键生成规范引用，支持多种引用格式标准，提高学术写作效率。
            </p>
          </div>

          <!-- 文献周报生成器 -->
          <div class="bg-gray-50 rounded-lg p-4">
            <div class="aspect-w-16 aspect-h-9 mb-4">
              <img 
                src="../assets/project2.gif"
                alt="文献周报生成器演示"
                class="rounded-lg object-contain w-full h-48 border border-gray-200 cursor-pointer hover:opacity-90 transition-opacity"
                @click="openImage($event)"
              >
            </div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">文献周报生成器</h3>
            <p class="text-gray-600 text-sm">
              自动追踪用户感兴趣的研究领域，定期汇总最新文献动态，生成个性化周报，帮助研究者及时掌握领域前沿进展。
            </p>
          </div>
        </div>
      </div>

      <!-- 图片预览弹窗 -->
      <div v-if="showPreview" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50" @click="closePreview">
        <img :src="previewSrc" alt="预览图" class="max-w-[90%] max-h-[90vh] object-contain">
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showPreview = ref(false)
const previewSrc = ref('')

const openImage = (event: Event) => {
  const img = event.target as HTMLImageElement
  previewSrc.value = img.src
  showPreview.value = true
}

const closePreview = () => {
  showPreview.value = false
}
</script>

<style scoped>
@media (max-width: 640px) {
  .min-h-screen {
    min-height: calc(100vh - 4rem);
  }
}
</style>
